<template>
	<view class="root">
		<view class="hader">
			<view class="tiem">{{statrtime}}</view>
			<!-- <view><u-icon name="scan" color="#2979ff" size="38"></u-icon></view> -->
			<view>
				<u-icon name="home" color="#2979ff" size="38"></u-icon>
			</view>
		</view>

		<view class="timems">
			{{timeend}}
		</view>
		<view class="inputBox">
			<view class="inu">
				<input type="text"  @confirm="forward" v-model="inputValue" />
			</view>
			<view class="scan">
				<u-icon name="scan" @longpress="logoTime" color="#2979ff" size="38"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setState,
		getState
	} from '@/store';
	export default {
		name: 'Chromium',
		data() {
			return {
				keyword: '',
				percent: 0,
				atPresent: '',
				isCollection: false,
				statrtime: '',
				timeend: '',
				inputValue: 'selfsummer'
			}
		},
		onLoad() {
			this.Immediately();
			setInterval(() => {
				this.Immediately();
			}, 500);
			
			// this.APPPLUS.getlocation().then(data=>{
			// 	console.log('getlocation',data);
			// })
			
		},
		methods: {
			logoTime() {
				console.log(123)
			},
			goHome() {
				uni.navigateTo({
					url: './Home',
				});
			},
			// 收藏
			Collection() {

			},
			Immediately() {
				const time = this.Public.GetData();

				const [sta, end] = time.split(" ");

				let [year, month, day] = sta.split("-");

				this.statrtime = `${year}年 ${month} 月 ${day} 日 ${this.Public.getWeekDate()}`;
				this.timeend = end;
			},
			clear() {
				this.keyword = '';
			},
			search(e) {
				console.log(e);
			},
			change(e) {
				console.log(e);
			},
			forward(){
				uni.navigateTo({
					url: './search?data=' + this.inputValue,
				});
			}
		},
	}
</script>

<style scoped lang="less">
	.root {
		position: fixed;
		width: 100%;
		top: 0;
		height: 100%;
		transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		background-image: url(https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wtcZ?ver=b9bd);
		background-repeat: no-repeat;
		background-size: auto;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.timems {
		position: absolute;
		width: 100%;
		top: 30%;
		text-align: center;
		margin: auto;
		// left: 50%;
		// -webkit-transform: translate(-50%, -50%);
		// transform: translate(-30%, -30%);
		font-size: 3rem;
		font-weight: bold;
		color: #2979ff;
	}

	.inputBox {
		width: 90%;
		height: 4rem;
		background: rgba(255, 255, 255, 0.25);
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		display: flex;
		border-radius: 2rem;

		.scan {
			width: 10%;
			margin: auto;
		}

		.inu {
			width: 85%;
			padding-left: 5%;

			input {
				width: 100%;
				height: 4rem;
				color: black;
				display: list-item;
				float: left;
				color: #2979ff;
				font-size: 1.5rem;
			}
		}

	}

	.hader {
		display: flex;

		view {
			width: 10%;
		}


		.tiem {
			width: 90%;
			font-size: 1.3rem;
			color: white;
		}
	}

	.u-search {
		z-index: 99999999999;
	}
</style>
